<template>
  <div id="videoMonitoring">
    <el-tabs
      v-model="activeName"
      @tab-click="handleClick"
      class="tabs"
    >
      <el-tab-pane
        label="所有视频"
        name="first"
        class="tabsContent"
      >
        <div
          v-for="(item, index) in videoArr"
          :key="index"
          class="tabsDiv"
        >
          <i class="el-icon-video-camera-solid videoIcon"></i> {{ item.name }}
        </div>
      </el-tab-pane>
      <el-tab-pane
        label="机车视频"
        name="second"
        class="tabsContent"
      >
        <div
          v-for="(item, index) in videoArr2"
          :key="index"
          class="tabsDiv"
        >
          <i class="el-icon-video-camera-solid videoIcon"></i> {{ item.name }}
        </div></el-tab-pane
      >
      <el-tab-pane
        label="视频分类"
        name="third"
        class="tabsContent"
      >
        <div
          v-for="(item, index) in videoArr3"
          :key="index"
          class="tabsDiv"
        >
          <i class="el-icon-video-camera-solid videoIcon"></i> {{ item.name }}
        </div></el-tab-pane
      >
    </el-tabs>

    <div class="videoMonitoringVideo">
      <div
        v-for="(item, index) in videoArr"
        :key="index"
        class="videoDiv"
      >
        <div>
          <video
            controls
            ref="videoz"
            muted
            loop
            class="videoImg"
          >
            <source
              type="video/mp4"
              :src="item.src"
            />
          </video>
          <p class="videoP">重庆轨道交通存放场</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawer: true,
      isCollapse: true,
      activeName: 'first',

      videoArr: [],
      videoArr2: [],
      videoArr3: [],
    }
  },
  components: {},
  created() {
    for (let i = 0; i < 10; i++) {
      this.videoArr.push({
        name: '基地成都轨道交通13号线',
        src: require('/src/assets/video/32242783-preview.mp4'),
      })
      this.videoArr2.push({
        name: '瓦窑滩基地成都轨道交通13号线-存放场',
        src: require('/src/assets/video/32242783-preview.mp4'),
      })
      this.videoArr3.push({
        name: '存放场',
        src: require('/src/assets/video/32242783-preview.mp4'),
      })
    }
  },
  mounted() {
    this.$refs.videoz.forEach((el) => {
      el.autoplay = true
    })
    document.onkeydown = (event) => {
      if (event.keyCode == 9) {
        console.log('按下了回车键')
        if (this.activeName == 'first') {
          this.activeName = 'second'
        } else if (this.activeName == 'second') {
          this.activeName = 'third'
        } else if (this.activeName == 'third') {
          this.activeName = 'first'
        }
        event.preventDefault()
      }
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
  },
}
</script>

<style lang="less" scoped>
#videoMonitoring {
  overflow: hidden;
  display: flex;
  height: 100%;
  width: 100%;
  .el-drawer {
    width: 20%;
  }
  .tabs {
    margin-top: 1rem;
    color: #000000;
    overflow: hidden;
    margin-left: 0rem;
    width: 20%;

    .tabsContent {
      overflow-y: scroll;
      overflow-x: hidden;
      height: 59rem;
      .tabsDiv {
        margin: 2rem;
        font-size: 17px;
        overflow: hidden;
        white-space: nowrap;
        .videoIcon {
          margin-right: 1rem;
        }
      }
    }
  }
  .videoMonitoringVideo {
    display: flex;
    flex-wrap: wrap;
    overflow-y: scroll;
    overflow-x: hidden;

    width: 80%;
    .videoDiv {
      width: 33%;
      margin-top: 1rem;
      height: 20rem;
      .videoImg {
        width: 90%;
        height: 15rem;
        display: block;
        margin: 0 auto;
      }
      .videoP {
        text-align: center;
        font-size: 20px;
        color: #000000;
        margin-top: 1rem;
      }
    }
  }
}
</style>
<style lang="less">
#videoMonitoring {
  .el-drawer {
    width: 25% !important;
  }
  .el-drawer__body {
    overflow: hidden;
  }

  .el-tabs__item {
  }
}
.el-dialog.is-fullscreen {
  overflow: hidden;
}
</style>
